/* -------------------------------------------------------------
	Name	           : styles.css
	Site               : designcreations.dk webshop
	Date	           : April 15th,2011
	Last Modified date : 
	
	Created by Thanh Phong, Pham
	email : phong.pham@mwc@.vn
-------------------------------------------------------------- */
@import url(layout.css);

/* ------------------------------------
	GENERAL ELEMENTS
------------------------------------ */
html { background: url(../img/bg_body.jpg);}

body {background: url(../img/bg_page.jpg) repeat-x top;}

/*link, paragraph, reuse elements*/
p {color: #3b3b3b;}

/*---- Form elements----*/
input, textarea, select {border: 1px #bbb solid; margin-top: 7px;}

select { width: 224px; float: left; border: 1px solid #bbb; color: #333; font: normal 11px Arial, Helvetica, sans-serif; padding: 4px 3px;}

textarea.text, input.text, input.file {background: #fff url(../img/bg_input.gif) repeat-x top; color: #5b5b5b; float: left; clear:both; padding: 3px 3px 2px 4px; font: normal 11px Arial, Helvetica, sans-serif;}

input.text, input.file {height: 17px; line-height: 18px;}
input.file { margin: 0 5px 0 0; float:left; clear:both;}
label { font-size: 11px; float: left; display:block; width: 210px;}

form p.file-input { position:relative; float: left; margin: 5px 0 0 0; width: 225px;}
form p.file-input span {display: block; position:absolute; right: 0; top: 18px; cursor: pointer; }
form p.file-input em { display:block; clear:both; font: italic 11px Arial, Helvetica, sans-serif;}
form p.total-price { width: 228px; text-align: center; font-weight: bold; font-size: 14px; padding-top: 10px;}

.field { overflow: hidden; padding-bottom: 5px;}

.field span { display: block; width: 225px;}
.field span img { float: left; margin-right: 6px;}

.field label { display: block; float: left; clear: left; overflow:hidden; font-size: 12px; line-height: 18px; padding: 8px 0 6px 0; width: 225px;}
.field label input { float: left; margin-top: 20px;}

.field .package-info { width: 140px;}

.rounded {border-radius: 4px; 
	-moz-border-radius: 4px; 
	-webkit-border-radius: 4px;}

/*Page*/
.wrapper {position: relative; min-height: 100%; }

/*Header*/
#header {
	overflow: hidden;
	width: 960px;
	height: 99px;
	margin: 0 auto;
}

#header a.logo {
	display: block;
	width: 170px;
	height: 70px;
	text-align:center;
	margin-top: 17px;
}

.mid-header { 
	width: 495px;
	margin-left: 30px;
}

.slogan{ 
	width: 495px;
	height: 32px;
	text-align: center;
	margin-top: 18px;
}

#cart { width: 250px; margin-top: 15px;}

#cart a.shopping-cart {
	background: url(../img/sprites/bg_cart.png) no-repeat top left;
	display: block;
	padding: 4px 0 0 60px;
	overflow:hidden;
}

#cart a.shopping-cart:hover { text-decoration: none;}

#cart a span {
	float: left;
	clear:left;
	color: #323232;
	white-space:nowrap;
}

#cart a span.link { 
	color: #007dcc;
	font-weight: bold;
}

#menu { position: relative; height: 48px;}

/*menu reset*/
#menu * {
	margin: 0px;
	padding: 0px;
	list-style-type: none;
	text-decoration: none;
}

#menu ul#mainMenu {
	white-space: nowrap;
	height: 48px;
	padding: 0; 
	margin: 0;
	overflow: hidden;
}

/* Geometrical arrangement */
ul#mainMenu li {
	display: inline-block;
	position: relative;
	height: 48px;
	margin: 0;	
	padding: 0;
	float: left;
	background: url(../img/menu_item_line.png) no-repeat top left;
}

ul#mainMenu li.back {
	position: absolute;
	height: 15px;
	z-index: 0;
	bottom: 0;
	background: url(../img/menu_pointer.png) no-repeat bottom center;
}

ul#mainMenu li.first, ul#mainMenu li.first a {width: 46px; padding: 0;}



/* Horizontal sliding doors */
ul#mainMenu li a {
	display: absolute;
	color:#4c4c4c;
	position: relative;
	z-index: 999;
	display:block;
	height: 48px;
	font: normal 14px/48px Arial, Helvetica, sans-serif;
}

ul#mainMenu li.current a, ul#mainMenu li a:hover  {
	color: #007cce;
	background: url(../img/menu_item_hover.png) repeat-x bottom;
} 

ul#mainMenu li a span {
	display:block;
	height: 43px;
	line-height: 48px;
	padding: 5px 14px 0;
	text-align:center;
}

ul#mainMenu li.last a span { padding-right: 8px;}

ul#mainMenu li.first a { width: 48px;}

ul#mainMenu li.first a span,
ul#mainMenu li.first.current a span,
ul#mainMenu li.first a:hover span {
	padding: 0;
	background:url(../img/sprites/home_icon.png) no-repeat bottom center;
	width: 15px;
	height: 14px;
	text-indent: -9999px;
	font-size: 0;
	margin: 20px auto 0 auto;
}

ul#mainMenu li.first.current a span { background-position: top center;}

ul#mainMenu li.current a span {
	background:url(../img/sprites/menu_item_active.png) repeat-x;
	color: #007cce;
}

ul#mainMenu li a:hover span,
ul#mainMenu li.current a:hover span { color: #007cce; }

/*-------Breadcumbs----------*/
#breadcumbs { overflow: hidden; padding: 2px 4px;}
#breadcumbs a, #breadcumbs span { display: block; float: left; margin-right: 5px; text-transform: uppercase; font-size: 11px; font-weight: bold; color: #565656; height: 14px; line-height: 14px; vertical-align: middle;}

#breadcumbs span img 			{ margin-top: 3px;}
#breadcumbs a:hover 			{ color: #007cce;}				

#breadcumbs a.home-link 		{ background:url(../img/sprites/home_icon.png) no-repeat bottom center; width: 16px; height: 14px;}
#breadcumbs a.home-link:hover 	{ background-position: top center; text-decoration: none;}

/*--------MAIN CONTENT----------*/
#main {
	clear:both;
	padding-top: 5px;
	width: 970px; 
	margin: 0 auto;
	position: relative;
}

#content-ctn {
	width: 700px;
	float: left;
	clear: both;
	overflow:hidden;
	position: relative;
}

.content-inner{ width: 660px; margin: auto; padding: 8px 0;}

.home {height: 632px;}

ul.ui-tabs-nav, a.order-btn, .ui-tabs-panel .package {background:url(../img/sprites/home_img.png) no-repeat 0 0;}

ul.ui-tabs-nav {
	width: 692px;
	height: 90px;
	background-position: 0 0;
	position: absolute;
	top: 163px;
	left: 8px;
	list-style:none;
	padding: 0 1px; 
	margin: 0;
	overflow:hidden;
	z-index: 999;
}

ul.ui-tabs-nav li {
	float:left;
	display:inline;
	overflow:hidden;
	height: 75px;
	background:url(../img/home_tab_sep.gif) no-repeat right bottom;
	padding-right: 3px;
}

ul.ui-tabs-nav li.last { background: none;}

ul.ui-tabs-nav li a, ul.ui-tabs-nav li .dis-tab {
	float:left;
	display:block;
	overflow:hidden;
	height: 66px;
	padding: 5px 12px;
	color: #9b9b9b;
}

ul.ui-tabs-nav li a:hover {color: #6a6a6a; text-decoration: none;}

ul.ui-tabs-nav li.ui-tabs-selected a {background:url(../img/home_selected_tab.png) no-repeat center; text-decoration: none;}

ul.ui-tabs-nav li a span {
	float:left;
	display:block;
	text-transform: uppercase;
	margin-top: 10px;
	font-size: 14px;
	font-weight: bold;
	line-height: 16px;
	height: 40px;
	padding-top: 10px;
	background:url(../img/sprites/tab_icons.png) no-repeat;
}

ul.ui-tabs-nav li a span.logo 		{ width: 61px; padding-left: 54px; background-position: 0 -49px; margin-left: 5px;}
ul.ui-tabs-nav li a span.visitcard 	{ width: 98px; padding-left: 75px; background-position: 0 -272px;}
ul.ui-tabs-nav li a span.website { width: 90px; padding-left: 58px; background-position: 0 -160px;}
ul.ui-tabs-nav li a span.webshop 	{ width: 85px; padding-left: 55px; padding-right: 3px; background-position: 0 -377px;}

ul.ui-tabs-nav li.ui-tabs-selected a span.logo 			{ width: 61px; padding-left: 54px; background-position: 0 0; margin-left: 5px; color: #e20100;}
ul.ui-tabs-nav li.ui-tabs-selected a span.visitcard 	{ width: 98px; padding-left: 75px; background-position: 0 -220px; color: #0093dd;}
ul.ui-tabs-nav li.ui-tabs-selected a span.website	{ width: 90px; padding-left: 58px; background-position: 0 -108px; color: #ed8b00;}
ul.ui-tabs-nav li.ui-tabs-selected a span.webshop 		{ width: 85px; padding-left: 55px; padding-right: 3px; background-position: 0 -325px; color:#424242;}

.ui-tabs-hide{ display:none; }

.ui-tabs-panel .banner 		{width: 692px; height: 172px; margin: 5px 0 0 8px; float: left; display:inline; background:url(../img/bg_banner.jpg) no-repeat;}
.ui-tabs-panel .banner h1 	{width: 214px;height: 41px;position:absolute;top: 10px;left: 0px;}

.ui-tabs-panel .banner a.order-btn 		{width: 295px; height: 76px; background-position: 0 -92px; display: block; margin: 58px 0 0 260px; text-indent: -9999px; font-size: 0; float: left;}
.ui-tabs-panel .banner a.order-btn:hover{background-position: -296px -92px;}

.ui-tabs-panel .banner .price 					{margin: 60px 0 0 60px;}
.ui-tabs-panel .banner .price					{position:absolute; top: 13px; left: 5px;}
.ui-tabs-panel .banner .price span 				{float: left; clear:left; display:block; color: #fff; text-shadow: 0px 1px 1px #000;}
.ui-tabs-panel .banner .price span.recent-price {font-size: 30px;}
.ui-tabs-panel .banner .price span.old-price 	{font-size: 22px;color: #ddd;}

.ui-tabs-panel .banner .price span.ease-line {
	background:url(../img/ease_line.png) no-repeat;
	width: 151px;
	height: 12px;
	position:absolute;
	top: 43px;
	left: 0;
}

a.more { 
	display: block; 
	float: right; 
	color: #008ed1; 
	text-decoration: underline;
	background: url(../img/arrow_s2.png) no-repeat right 3px;
	padding-right: 22px;
	margin-right: 7px;
}

a.more:hover { color: #0082e7; text-decoration: none;}

.example { margin: 81px 0 0 5px; clear:both; float: left; width: 702px;}
.example h2 {text-transform: uppercase; color: #454545; padding: 0 0 3px 4px; float: left; margin: 0;}
.example .example-list 		{ height: 196px;}
ul.logo-list 		{ list-style: none; padding: 15px 0 0 0; margin: 0; overflow: hidden;}
ul.logo-list li 	{float: left; display:inline; margin: 10px 9px ;}
ul.logo-list li img{ width: 140px; height: 58px;}

ul.card-list, 
ul.website-list 	{ list-style: none; padding: 15px 6px 0 6px; margin: 0; overflow: hidden;}
ul.website-list 	{ padding: 15px 0 0 0;}

.example ul.card-list li 		{float: left; display:inline; margin: 10px 10px 0 15px;}
ul.website-list li {float: left; display:inline; margin: 8px 6px 0 6px;}

ul.card-list li img 		{ width: 180px; height: 147px;}
ul.website-list li a.site-thumb {display:block; border: 1px solid #bdbdbd; position:relative; width: 196px; height: 115px; text-align:center;}
ul.website-list li a.site-thumb span { display:none; width: 80px; height: 20px; padding: 5px; text-align:center; font-size: 20px; color: #333; font-weight: bold; position:absolute; z-index: 1; top: 4px; left: 55px; background: #fff;}
ul.website-list li a.site-thumb:hover span { display:block;}
ul.website-list li a.site-thumb img	{ width: 188px; height: 107px; margin-top: 4px;}
ul.website-list li a.site-thumb:hover img { opacity: 0.6; filter:alpha(opacity=60);}
ul.website-list .info { background: #e5e5e5; height: 27px; line-height: 26px; color: #333; font-size: 15px; padding-left: 10px; margin-top: 4px;}
ul.website-list .info a.min-buy-btn { display:block; background:url(../img/min-buy-btn.png) no-repeat; width: 82px; height: 27px; text-indent: -9999px;}

.ui-tabs-panel .package 			{ background-position: 0 -168px; width: 701px; height: 157px; margin: 4px 0 0 3px; position: relative;}
.ui-tabs-panel .package h2			{ float: left; display:inline; margin: 22px 0 0 25px; padding: 0; overflow: hidden; font-size:24px; text-transform:uppercase;}
.ui-tabs-panel .package h2 img		{ margin-top: 0; float: left;}
.ui-tabs-panel .package h2 span		{font: italic 18px/24px Arial, Helvetica, sans-serif; font-weight: normal; /*float: left;*/ margin-left: 4px;}
.ui-tabs-panel .package ul			{list-style: none; padding: 10px 0 0 25px; margin: 0; float: left; clear: both;}
.ui-tabs-panel .package ul li		{overflow: hidden; background:url(../img/sprites/home_img.png) no-repeat -680px -128px; height: 26px; padding-left: 25px; line-height: 25px; width: 600px;}
.ui-tabs-panel .package ul li span 	{float: left; display: block; font-size: 14px; font-weight: bold; font-style: italic; padding-right: 3px;}
.ui-tabs-panel .package ul li em	{font-size: 12px; font-weight: normal; padding-left: 3px;}
.ui-tabs-panel .package ul li a.more{float: left; margin-top: 1px; background-position: right 8px;}

.ui-tabs-panel .package .illus		{ display: block; width: 120; height: 91px; position: absolute; top: 40px; right: 30px;}

/*----Style tabs/tabs content for portfolio and price page---*/

.dc-tabs-content {padding: 5px 0 0 0; height: 608px;}

.dc-tabs-content ul.ui-tabs-nav {
	width: 700px;
	height: 62px;
	background: url(../img/grey_line.gif) no-repeat bottom;
	padding: 0;
	position: static;
}

.dc-tabs-content ul.ui-tabs-nav li,
.dc-tabs-content  ul.ui-tabs-nav li a,
.dc-tabs-content  ul.ui-tabs-nav li .dis-tab,
.dc-tabs-content  ul.ui-tabs-nav li.ui-tabs-selected,
.dc-tabs-content  ul.ui-tabs-nav li.ui-tabs-selected a { background:url(../img/sprites/bg_tabs.png) no-repeat;}

.dc-tabs-content ul.ui-tabs-nav li 	{ height: 62px; background-position: left -64px; padding-left: 11px; padding-right: 0;}

.dc-tabs-content  ul.ui-tabs-nav li a { background-position: right -64px; overflow: hidden;}

.dc-tabs-content  ul.ui-tabs-nav li a,
.dc-tabs-content  ul.ui-tabs-nav li.ui-tabs-selected a { height: 65px; float: none; padding: 0 15px 0 3px; text-decoration: none;} 

.dc-tabs-content  ul.ui-tabs-nav li.ui-tabs-selected { background-position: top left;}
.dc-tabs-content  ul.ui-tabs-nav li.ui-tabs-selected a { background-position: top right;}

.dc-tabs-content  ul.ui-tabs-nav li#brochureTab a {padding-right: 16px;}

.dc-tabs-content .tab-content-ctn, .box-decor-mid {background:url(../img/bg_tab_content.png) repeat-y center;}

.dc-tabs-content .tab-content-ctn { height: 533px;}

/*--Portfolio page ---*/
#portfolio { margin-top: 0; overflow: hidden; height: 608px;}

#portfolio ul.portfolio	{ list-style: none; overflow: hidden; padding: 10px 0 0 10px; margin: 0; height: 493px;}
#portfolio ul.portfolio li { float: left; display:inline; opacity: 0.80; filter:alpha(opacity=80);}
#portfolio ul.portfolio	li:hover { opacity: 1; filter:alpha(opacity=100);}

#portfolio ul.logo-list	li 		{margin: 18px 15px;}
#portfolio ul.card-list	li 		{margin: 16px 25px 5px 35px;}
#portfolio ul.card-list	li img  { width: 160px; height: 131px;}

#portfolio ul.website-list li {margin:8px 14px 6px 14px !important;}

/*---- Priser page ----*/
#price .price-content { padding: 20px; height: 415px;}
.download { background: url(../img/down_arrow_s2.gif) no-repeat right 3px; padding-right: 14px; color: #0093dd; text-decoration: underline;}
a.download:hover { text-decoration: none;}

#price .price-content ul { list-style: none; padding: 5px 0 10px 0; margin: 0;}
#price .price-content ul li { background: url(../img/arrow_bullet.png) no-repeat left; padding-left: 20px; margin-top: 5px;}

/*------ FAQ--------*/
#faq .tab-content-ctn { padding-top: 20px; height: 513px;}

#faq p, .#faq ul { margin: 5px 0 15px 20px;}

/*----Style for payment process ----*/
.purchase-process form { overflow:hidden;}
.purchase-process .form-inner { height: 430px; }

.purchase-process label { width: 160px; float: left; clear: left; font-size: 12px; padding-top: 10px;}
.purchase-process input, 
.purchase-process textarea { width: 350px; float: left; clear: none; }
.purchase-process select   { width: 359px;}

.purchase-process textarea {width: 490px; height: 120px;}


.purchase-process p.file-input { overflow: hidden; width: 385px;}
.purchase-process p.file-input span {top: 5px;}

.purchase-process p.file-input em { padding: 3px 0 10px 160px;}

.purchase-process input.file { margin-top: 5px;}

.purchase-process a.more-file {float: left; display: block; height: 20px; line-height: 20px; margin: 10px 0 0 15px; background:url(../img/plus.png) no-repeat right; padding-right: 23px; color:#323232;}
.purchase-process a.more-file:hover { color: #0093dd;}

.purchase-process .dc-tabs-content .ui-tabs-nav    {width: 701px;}
.purchase-process .dc-tabs-content .ui-tabs-nav li { height: 40px;}

.purchase-process .dc-tabs-content .ui-tabs-nav li.ui-tabs-selected a, .purchase-process .dc-tabs-content ul.ui-tabs-nav li a { height: 41px; overflow:hidden;  padding: 0 20px 0 0;}
.purchase-process .dc-tabs-content ul.ui-tabs-nav li .dis-tab { height: 40px; overflow:hidden;  padding: 0 20px 0 0;  background-position: right -64px;}
.purchase-process .dc-tabs-content .ui-tabs-nav li.ui-tabs-selected a {padding-right: 27px;}
.mac .purchase-process .dc-tabs-content .ui-tabs-nav li.ui-tabs-selected a {padding-right: 23px;}

.purchase-process .dc-tabs-content .ui-tabs-nav,
.purchase-process .dc-tabs-content li.ui-tabs-selected, .purchase-process .dc-tabs-content ul li.ui-tabs-selected a  { height: 41px;}

.purchase-process .dc-tabs-content li span 		{ height: 24px; background:url(../img/sprites/bg_tabs.png) no-repeat; padding-top: 0; line-height: 24px; text-transform: uppercase; font-size: 14px; font-weight: bold; margin-top: 12px; float: left; }
.purchase-process .dc-tabs-content li span.num 	{ width: 25px; height: 24px; display: block; float: left; font-weight: bold;  background-position: -92px -25px; margin: 12px 10px 0 7px; text-align: center;  font-size: 16px; }
.purchase-process .dc-tabs-content li.ui-tabs-selected span.num 	{background-position: -92px 0;	 text-align: center; color: #0093dd; }
.purchase-process .dc-tabs-content li.ui-tabs-selected span.step    {color: red;}

.purchase-process .content-inner { min-height: 250px;}

#shoppingCart label {float: none; padding-top: 5px; display: inline;}
#shoppingCart input.check-box { float: none; width: 20px;}

.purchase-process .dc-tabs-content li span.step { background: none;}

.purchase-process .tab-content-ctn {padding-top: 15px; padding-bottom: 7px;}

#leveringForm input.text { width: 220px; float: left; display: inline; margin-top: 8px;}
#leveringForm input.check-box { width: 14px; float: left; display: inline; margin-top: 0px;}
#leveringForm label { float: left; width: 75px; padding-top: 7px; overflow: hidden; line-height: 20px;}
#leveringForm label.w100 { width: 100px;}
#leveringForm label.w200 { width: 200px; clear: none;}
#leveringForm label.w210 {float: right; width: 210px;}
#leveringForm label.w50 {width: 50px; clear: none;}
#leveringForm h3 { border-bottom: 1px dotted #aeaeae; padding: 4px 0; margin: 0 0 10px 0;}
#leveringForm textarea { width: 195px; margin-left:5px; padding: 4px; height: 95px; font: normal 12px Arial, Helvetica, sans-serif;}

.payment_total { background: url(../img/bg_payment_total.png) repeat-x bottom; border: 1px solid #eaeaea; margin-top: 50px;}
.payment_total .total-inner { background: url(../img/bg_total_inner.png) no-repeat 50%; height:74px; border: 1px solid #fff; overflow: hidden;}

.payment_total dl 	{ padding: 15px 30px; overflow: hidden; font-size: 14px; line-height: 22px; width: 230px; float: left;}
.payment_total dt	{float: left; width: 100px; }
.payment_total dl.total {font-size: 18px; float: right; line-height: 24px; padding-top: 25px; }
.payment_total dl.total dd { color: red;}

/*---Style for fake scrollbar ----*/
.scroll-content {
	padding: 0 0 50px 20px;
	width: 672px;
	height: 370px;
	overflow:hidden;
	position:relative;
	margin: 0 0 15px 3px;
}

.scroll-content .viewport { width: 660px; height: 420px; overflow: hidden; position: relative; }

.scroll-content .viewport-inner { list-style: none; position: absolute; left: 0; top: 0; padding: 0; margin: 0; }
.scroll-content .scrollbar{ background: #f7f7f7; position: relative; background-position: 0 0; float: right; width: 6px; }
.scroll-content .track { background: #e6e5e0; height: 100%; width:6px; position: relative; padding: 0 1px; }
.scroll-content .thumb { background: #c9c6bc url(../img/draggable_bar.gif) no-repeat center; height: 20px; width: 6px; cursor: pointer; overflow: hidden; position: absolute; top: 0; left: 0; }
.disable { display: none;}

.scroll-content .bottom-mask { position: absolute; bottom: 0; width: 650px; height: 8px; background:url(../img/scroll_btm_mask.png) repeat-x bottom; z-index: 9;}

/*----Panination-----*/
.pagination { overflow:hidden; border-top: 1px dotted #aeaeae; margin: 0 15px; padding: 5px 0;}

.pagination .pagination-nav {float: right;}

.pagination a, .pagination span { display: block; float: left; background:url(../img/sprites/bg_pagination.png) no-repeat; width: 18px; height: 18px; line-height: 17px; border: 1px solid #c2c2c2; color: #565656; text-align: center; text-decoration: none; margin: 0 3px; }

.pagination span.page-num { border: none; width: auto; margin: 0; background: none;}

.pagination a:hover { color: #0086cb; border: 1px solid #0092dd;}

.pagination .pagination-next, .pagination .dis-pagination-next, .pagination .dis-pagination-prev, .pagination .pagination-prev { text-indent: -9999px; font-size: 0; width: 21px; }

.pagination .pagination-next { background-position: 0 -93px; margin: 0 0 0 10px;}
.pagination .dis-pagination-next { background-position: 0 -74px; margin: 0 0 0 10px;}

.pagination .dis-pagination-prev { background-position: 0 -38px; margin-right: 10px; }

.pagination .pagination-prev  { background-position: 0 -57px; margin-right: 10px;}

.pagination .current-page { color: #fff; font-weight: 600; border: 1px solid #0092dd; background-position: 0 -19px;}

/*---- Box decorations---*/
.box-decor-top, .box-decor-btm { background: url(../img/sprites/bg_box_decor.png) no-repeat;} 
.box-decor-top { background-position: top left; height: 11px;}
.box-decor-mid { padding: 8px 0; height: 568px;}
.box-decor-btm { background-position: bottom left; height: 13px;}

/*----- Product pages style -------*/
.dc-products, .dc-content { overflow: hidden; padding-top: 5px;}

.dc-products .content-inner { width: 680px;}

.dc-products .product-desc { padding: 0 10px;}

ul.product-list { list-style: none; padding: 10px 0 0 0; margin: 0; overflow: hidden;}
ul.product-list li { float: left; display: inline; width: 169px; height: 254px; position: relative; background:url(../img/sprites/bg_prd_box.png) no-repeat top right;}

ul.product-list li span, ul.product-list li h2 {display: block; text-align: center; width: 168px; margin: 0 auto;}
ul.product-list li h2 { text-transform: uppercase; padding: 5px 0 0 0; min-height: 55px;}

ul.product-list li span.illus { height: 110px; margin-top: 15px; text-indent: -9999px; font-size: 0; background: url(../img/sprites/prd_img.png) no-repeat;}
ul.product-list li span.logo { background-position: 0 0; width: 132px;}
ul.product-list li span.card { background-position: 0 -110px; width: 132px; margin: 20px 0 0 29px; height: 105px;}
ul.product-list li span.stationary { background-position: -133px 0; width: 122px;}
ul.product-list li span.brochure { background-position: -135px -110px; width: 132px;}
ul.product-list li span.current-price { color: #e20100; text-transform: uppercase;}
ul.product-list li span.current-price strong, ul.product-list li span.old-price { font-size: 14px;}

ul.package-list { padding: 30px 0 0 0;}
ul.package-list li {height: 273px; background-position: top left;}
ul.package-list li span.platinum, ul.package-list li span.gold,
ul.package-list li span.silver, ul.package-list li span.diamond 
{height: 110px; width: 140px; background-image: url(../img/sprites/prd_img.png); margin-top: 8px; position: absolute; top: -35px; left: 15px;}

ul.package-list li span.platinum { background-position: -260px 0;}
ul.package-list li span.gold { background-position: -400px -110px;}
ul.package-list li span.diamond { background-position: -260px -110px;}
ul.package-list li span.silver { background-position: -400px 0;}

ul.package-list span.prd-in-pk { margin-top: 90px; height: 80px; }

ul.package-list a.buy-btn { width: 100px; height: 33px; display: block; margin: 10px auto; text-indent: -9999px; font-size: 0; background:url(../img/sprites/buy_btn.jpg) no-repeat 0 0;}

ul.package-list a.buy-btn:hover { background-position: -100px 0;}

.prd-package-custom { background:url(../img/sprites/bg_prd_pk.jpg) no-repeat;}

.prd-package-custom { width: 668px; height: 110px; margin: 0 auto; background-position: 0 0; overflow: hidden;}
.prd-package-custom p { margin: 18px 0 0 150px; width: 370px; float: left; display: inline;}
.prd-package-custom a.begin-btn { margin: 25px 30px 0 0;}
.prd-package-custom .process-link { border-top: 1px dotted #aeaeae; padding: 10px 0; margin: 10px 0 0 150px; width: 485px; overflow: hidden;}
.prd-package-custom .process-link a { float: left; font-weight: bold; font-size: 14px; text-decoration: none; text-transform: uppercase;}
.prd-package-custom .process-link a:hover { text-decoration: underline;}

/*--- Content pages -----*/
.dc-content .box-decor-mid { padding: 0; height: 584px;}
.dc-content .dc-banner { width: 692px; margin: 0 auto; padding-bottom: 5px;}
.dc-content .content-inner { padding: 10px 20px;}
.dc-content .content-inner h1 {color: #0093dd;}

.dc-content .scroll-content { height: 440px; padding: 0; margin: 0;}  
.dc-content .scroll-content .viewport { height: 450px;}
.dc-content h2 { padding: 5px 0;}
.dc-content p  {padding: 0 0 7px 0;}
.dc-content ul, .dc-content ol {list-style-position:inside; padding: 0;}
.dc-content ul li, .dc-content ol li { padding: 3px 0;}

#accordion {height: 600px;}
#accordion h4.ui-accordion-header { overflow: hidden; margin: 8px 0 0 0; padding: 0;}
#accordion h4.ui-accordion-header span { float: left;}
#accordion h4 span.ui-icon { float: right; background: url(../img/arrow_s1.png)no-repeat center; width: 14px; height: 16px; margin-top: 10px;}
#accordion h4.ui-state-active span.ui-icon { float: right; background:url(../img/down_arrow_s2.gif) no-repeat center; width: 14px; height: 16px; margin-top: 10px;}

#accordion h4.ui-accordion-header a { display:block; float: left; display: inline; border-bottom: 1px dotted #aeaeae; width: 615px; color: #323232; text-decoration: none; font-size: 12px; text-transform: uppercase; margin-top: 2px;}
#accordion .ui-accordion-content { padding: 3px 10px 0 30px;}
/*---Contact page -------*/
.contact .content-inner { padding-top: 0px;}

.contact form, .contact fieldset {  overflow: hidden; padding-bottom: 5px;}

.contact form { background:url(../img/contact_sep.jpg) no-repeat bottom center; padding-bottom: 15px;}

.contact textarea { margin-left: 12px; width: 380px; height: 80px;}
.contact label { float: left; display: block; overflow:hidden; font-size: 12px; padding: 7px 15px 5px 0; width: auto; white-space:nowrap;}
.contact input.check-box { margin: 0 4px 0 0; border: none;}

.contact .actions-ctn { padding: 7px 0; margin-top: 5px;}

.contact .contact-info { position: relative; border: 1px solid #ccc; background: url(../img/bg_contact_address.gif) repeat-x top; height: 131px; width: 608px; padding: 10px 25px; margin-top: 35px;}

.contact .contact-info .contact-info-inner { border-top: 1px dotted #aeaeae; padding: 10px 0;}

.contact .contact-info p { width: 260px; float: left; display: inline; padding: 10px 0;}
.contact .contact-info p.contact-address { border-right: 1px dotted #aeaeae; width: 300px;  margin-right: 30px; }

.contact .contact-info span.contact-img { position: absolute; width: 82px; height: 68px; right: 15px; top: -15px;}

/*------ Buttons -----*/
.actions-ctn {overflow: hidden; width: 660px; margin: 12px auto; padding: 7px 0; border-top: 1px dotted #aeaeae;}
.actions-ctn p { width: 465px; float: right; text-align: right;}

a.begin-btn, a.contact-btn, a.next-btn, a.checkout-btn, 
a.confirm-btn, a.print-btn, a.pk-add-cart-btn, .send-btn, .cancel-btn { background:url(../img/sprites/buttons.png) no-repeat; display: block; text-indent: -9999px; font-size: 0;}

a.back-btn 			{ width: 120px; float: left; background: url(../img/arrow_s3.gif) no-repeat left center; padding-left: 23px;}

a.next-btn 			{ background-position: -847px 0; width: 115px; height: 33px;}
a.next-btn:hover 	{ background-position: -873px -34px;}

a.begin-btn 		{ width: 93px; height: 23px; background-position: -380px -68px; float: right;}
a.begin-btn:hover 	{background-position: -474px -68px;}

a.contact-btn 		{width: 378px; height: 56px; background-position: 0 0; }
a.contact-btn:hover { background-position: 0 -57px;}

a.website-btn 		{width: 378px; height: 58px; background: url(../img/btn_website.png) no-repeat top; display:block; }
a.website-btn:hover {background-position:bottom;}

a.webshop-btn 		{width: 378px; height: 57px; background: url(../img/btn_webshop.png) no-repeat top; display:block; }
a.webshop-btn:hover {background-position:bottom;}

.contact-ctn	 	{ width: 380px; margin: 0 auto;}
.contact-ctn span 	{ display: block; width: 380px; text-align: center; font-weight: bold;}

a.pk-add-cart-btn 		{ background-position: -379px 0; width: 233px; height: 33px;}
a.pk-add-cart-btn:hover { background-position: -613px 0;}

.send-btn 			{ background-position: -380px -92px; width: 72px; height: 23px; margin-right: 5px;}
.send-btn:hover	{ background-position: -453px -92px;}

.cancel-btn 		{ background-position: -568px -68px; width: 64px; height: 23px;}
.cancel-btn:hover	{ background-position: -633px -68px;}

a.checkout-btn		{ background-position: -379px -34px; width: 163px; height: 33px; }
a.checkout-btn:hover{ background-position: -543px -34px;}

a.confirm-btn		{ background-position: -707px -34px; width: 165px; height: 33px; }
a.confirm-btn:hover { background-position: -734px -68px;}

a.print-btn			{ background-position: -526px -92px; width: 103px; height: 23px; }
a.print-btn:hover 	{ background-position: -630px -92px;}

/*-------Sidebar--------------*/
#sidebar, .add-cart-btn, #sidebar .buy-btn, span.eller { background:url(../img/sprites/sidebar.png) no-repeat 0 0;}
#sidebar {
	width: 282px;
	height: 684px;
	position: absolute;
	left: 702px;
	top: -45px;
	z-index: 10;
}

#sidebar h3 {width: 200px; height: 30px; margin: 17px auto 0 auto; padding: 0; text-align: center;}
.sidebar-content { margin: 0 auto; padding: 10px 0;}

/*--- Style the selectbox----*/
span.selectbox-decor { background: url(../img/bg_selectbox.gif) repeat-x top; height: 21px; border: 1px solid #0094c5; line-height: 21px; padding: 0 4px 0 9px ; margin-left: 29px; width: 208px;}

span.selectbox-decor-inner 	{ background: url(../img/down_arrow_s1.gif) no-repeat right 6px; color: #000; text-transform: uppercase;}
select#designChoices 		{width: 220px; margin:2px 0 0 30px; padding-left: 2px; }

.ie span.selectbox-decor { margin-left: 28px; width: 210px;}
.ie select#designChoices  {	width: 225px; margin:2px 0 0 28px; padding: 2px 0;}

#formBoxes, #orderStatus { width: 226px; margin: 10px auto; height: 480px;}

#formBoxes form p.logo-link { text-align: center; padding: 8px 0 0 0; width: 226px;}
#formBoxes form p.logo-link a { color:#008ed1; text-decoration: underline;}
#formBoxes form p.logo-link a:hover { text-decoration: none;}

.add-cart-btn, #sidebar a.buy-btn, span.eller {  display:block; float: left; clear:both;}
.add-cart-btn		 	{ width: 226px; height: 25px; background-position: 0 -685px;}
.add-cart-btn:hover 	{ background-position: 0 -711px;}
span.eller				{ background-position: right -739px; width: 60px; height: 25px; margin: 8px 0 0 80px;  }

#sidebar .buy-btn	{ width: 227px; height: 61px; background-position: 0 -744px;}
#sidebar .buy-btn:hover { background-position: 0 -804px;}

#sidebar ul.links { width: 226px; margin: 0 auto; padding: 0; list-style:none;}
#sidebar ul.links li { margin: 0; padding: 0 0 0 8px; background:url(../img/dot.gif) no-repeat left 8px ;}
#sidebar ul.links a { font-size:11px; color: #008ed1;}
#sidebar ul.links a:hover { text-decoration: underline;}

#sidebar dl { line-height: 18px; margin-bottom: 5px;}
#sidebar dt {float: left; width: 55px;}
#sidebar dd { margin-left: 55px; font-weight: bold;}

#orderStatus    { border-bottom: 1px dotted #aeaeae; height: 465px; padding-bottom: 15px;}
#orderStatus ul { padding: 0 0 0 10px; margin: 0;}
#orderStatus h4 { margin-top: 10px;}
#orderStatus .message {height: 140px; overflow: auto;}

/*--------Live chat button -------------*/
a.live-chat { display:block; width: 57px; height: 153px; position: absolute; top: -24px; left: 970px; z-index: 8;}


/* ----- FOOTER NAVIGATION -----*/
#footerNav {
	background: url(../img/bg_footer.jpg) repeat-x top;
    color: #d1d1d1;
    margin: 12px auto 0 auto;
    padding: 8px 0 0;
	height: 118px;
	float: left;
	clear: left;
	width: 99.99%
}

#footerNav .footer-ctn { overflow: hidden; width: 960px; margin: auto; padding-left: 8px;}
#footerNav .left-footer, #footerNav  .support-info, #footerNav .right-footer {overflow: hidden;}

#footerNav p { text-shadow: 0 1px 1px black; color: #dcdcdc; float: left; clear:both; width: 260px;}

#footerNav .support-num { padding: 31px 0 0 15px;}

#footerNav .support-num p {line-height: 1em; margin: 0; padding: 0;}
#footerNav .support-num p.num { padding: 8px 0 3px 0; font-size: 29px; letter-spacing: 4px; line-height: 24px;}

#footerNav .support-num p strong { color: #fff;}

#footerNav h3 { margin: 0; padding: 0;}

#footerNav a 		{ color: #44c0ff;}
#footerNav a:hover 	{ text-decoration: underline; color: #00d4fb;}

#footerNav .social		 {border-bottom: 1px dotted #b6b6b6; margin: 4px 0 0 5px; width: 255px;}
#footerNav .social a.icon{ display: block; margin-right: 12px; float:  left;}
#footerNav .contact-info {padding: 10px 0 0 5px;}

/*footer*/
#footer{
	height: 38px;
	overflow:hidden;
	clear:both;
	width: 950px;
	margin: 0 auto;
}

#footer p, #footer a {color:#3a3a3a;}
#footer p.copyright {float: left;}
#footer p.info { text-align: center;} 
#footer a:hover {color: #005da5;}

#thumbPopup {border: 1px solid #bababa; -webkit-box-shadow: 1px 1px 7px rgba(50, 50, 50, 0.75); -moz-box-shadow: 1px 1px 7px rgba(50, 50, 50, 0.75); box-shadow: 1px 1px 7px rgba(50, 50, 50, 0.75); background: #fff; padding: 4px; z-index: 9999;}






